import styles from './Echart.module.scss'
import { defineComponent, ref, inject, reactive, nextTick } from 'vue'
import { useExpose } from '@renderer/utils'
import { export2Img } from '@renderer/utils/utils'

export default defineComponent({
  name: 'Echart',
  setup(props, { emit, slots }) {
    const echarts: any = inject('ec')
    const myChartLineRef = ref<any>(null)
    const myChartWeixinPieRef = ref<any>(null)
    const myChartQyWeixinPieRef = ref<any>(null)
    const state = reactive({
      data: {},
      pic1: {},
      pic2: {},
      picShow: true,
      isPicShow: true
    })
    // 折线图
    const getEchartsLine = (data: any) => {
      const myChartLine = echarts?.init(myChartLineRef.value)
      myChartLine.clear()
      const option = {
        title: {
          text: data.title
        },
        tooltip: {
          trigger: 'axis'
        },
        color: data.color,
        legend: {
          data: data.legend,
          bottom: 'bottom'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {
            //   title: '下载图片'
            // }
            itemSize: 20,
            itemGap: 30,
            right: 50,
            myTool: {
              show: true,
              title: '下载图片',
              icon: 'M4.7,22.9L29.3,45.5L54.7,23.4M4.6,43.6L4.6,58L53.8,58L53.8,43.6M29.2,45.1L29.2,0',
              onclick: () => export2Img(myChartLineRef.value, data.title)
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.time
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [
          {
            name: data.legend[0],
            type: 'line',
            stack: 'Total',
            data: data.data1
          },

          {
            name: data.legend[1],
            type: 'line',
            stack: 'Total',
            data: data.data2
          }
        ]
      }
      myChartLine.setOption(option)
      window.addEventListener('resize', function () {
        //执行
        if (myChartLine) {
          // 判断一下，防止在初始化的时候报错，cannot read property 'resize' of null
          myChartLine.resize()
        }
      })
    }
    // 饼图
    const getEchartsOne = (data: any) => {
      const myChartPie = echarts?.init(myChartWeixinPieRef.value)
      const option = {
        title: {
          text: data.title,
          left: 'center'
        },
        color: data.color,
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'center',
          bottom: 'bottom'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {
            //   title: '下载图片'
            // }
            myTool: {
              show: true,
              title: '下载图片',
              icon: 'M4.7,22.9L29.3,45.5L54.7,23.4M4.6,43.6L4.6,58L53.8,58L53.8,43.6M29.2,45.1L29.2,0',
              onclick: () => export2Img(myChartWeixinPieRef.value, data.title)
            }
          }
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: data.data,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} {c}'
                },
                labelLine: { show: true }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChartPie.setOption(option)
      window.addEventListener('resize', function () {
        //执行
        if (myChartPie) {
          // 判断一下，防止在初始化的时候报错，cannot read property 'resize' of null
          myChartPie.resize()
        }
      })
    }
    // 饼图
    const getEchartsTwo = (data: any) => {
      const myChartPie = echarts?.init(myChartQyWeixinPieRef.value)
      const option = {
        title: {
          text: data.title,
          left: 'center'
        },
        color: data.color,
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'center',
          bottom: 'bottom'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {
            //   title: '下载图片'
            // }
            myTool: {
              show: true,
              title: '下载图片',
              icon: 'M4.7,22.9L29.3,45.5L54.7,23.4M4.6,43.6L4.6,58L53.8,58L53.8,43.6M29.2,45.1L29.2,0',
              onclick: () => export2Img(myChartQyWeixinPieRef.value, data.title)
            }
          }
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: data.data,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} {c}'
                },
                labelLine: { show: true }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChartPie.setOption(option)
      window.addEventListener('resize', function () {
        if (myChartPie) {
          myChartPie.resize()
        }
      })
    }

    // 群发监控-eCharts
    const getOverViewEChart = (data: any) => {
      let option = {
        title: {
          text: data.title,
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        color: data.color,
        legend: {
          data: data.legend,
          bottom: 'bottom'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true
        },
        toolbox: {
          feature: {
            itemSize: 20,
            itemGap: 30,
            right: 50,
            myTool: {
              show: true,
              title: '下载图片',
              icon: 'M4.7,22.9L29.3,45.5L54.7,23.4M4.6,43.6L4.6,58L53.8,58L53.8,43.6M29.2,45.1L29.2,0',
              onclick: () => export2Img(myChartLineRef.value, data.title)
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.massDataList.Time,
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [
          {
            name: '群发成功数量',
            type: 'bar',
            stack: 'one',
            data: data.massDataList.Data,
            color: 'rgb(88, 165, 92)'
          },
          {
            name: '私信成功数量',
            type: 'bar',
            stack: 'one',
            data: data.privateLetterList.Data,
            color: 'rgb(246, 81, 87)'
          },
          {
            name: '失败数量',
            type: 'bar',
            stack: 'one',
            data: data.messFailList.Data,
            color: 'rgb(255, 107, 0)'

          },
          {
            name: '未发送数量',
            type: 'bar',
            stack: 'one',
            data: data.messNoSendList.Data,
            color: 'rgb(190, 190, 190)'
          },
          {
            name: '群发总量',
            type: 'line',
            stack: 'two',
            data: data.massDispatchList.Data,
            color: '#1e80ff'
          },
        ]
      }
      const myChartLine = echarts?.init(myChartLineRef.value)
      myChartLine.setOption(option)
      window.addEventListener('resize', function () {
        if (myChartLine) {
          myChartLine.resize()
        }
      })
    }

    const onState = async (type: number, res: any) => {
        console.log('type: ', type);
      // 0 自动添加好友 1 加群好友 2 无限群发 3 发布群公告 4 群发监控
      type == 0 ? (state.picShow = false) : (state.picShow = true)
      type == 4 ? (state.isPicShow = false) : (state.isPicShow = true)
      await nextTick()
      switch (type) {
        case 0:
          state.data = {
            title: '添加好友趋势图',
            color: ['#60d074'],
            legend: ['微信客户'],
            time: res.FriendTrendChat.WeiChat.Time,
            data1: res.FriendTrendChat.WeiChat.Data,
            data2: res.FriendTrendChat.WeiWork.Data
          }
          getEchartsLine(state.data)
          state.pic1 = {
            title: '微信添加状态占比',
            color: ['#6692f7', '#88cbd5', '#6ba364', '#f7d162', '#ef66e2'],
            legend: ['等待发送', '已发送', '发送失败', '已通过', '已是好友'],
            data: res.WeiChatPieChat?.map((item: any) => ({ name: item.Id, value: item.Value }))
          }
          getEchartsOne(state.pic1)
          break
        case 1:
          state.data = {
            title: '加群好友趋势图',
            color: ['#60d074', '#438ded'],
            legend: ['微信客户', '企微客户'],
            time: res.FriendTrendChat.WeiChat.Time,
            data1: res.FriendTrendChat.WeiChat.Data,
            data2: res.FriendTrendChat.WeiWork.Data
          }
          getEchartsLine(state.data)
          state.pic1 = {
            title: '群好友添加情况',
            color: ['#6692f7', '#88cbd5', '#6ba364', '#f7d162', '#ef66e2'],
            legend: ['等待发送', '已发送', '发送失败', '已通过', '已是好友'],
            data: res.GroupChatFriendPieChat?.map((item: any) => ({ name: item.Id, value: item.Value }))
          }
          getEchartsOne(state.pic1)
          state.pic2 = {
            title: '企业微信添加状态占比',
            color: ['#6692f7', '#88cbd5', '#6ba364', '#f7d162', '#ef66e2'],
            legend: ['等待发送', '已发送', '发送失败', '已通过', '已是好友'],
            data: res.GroupChatFriendPieWeWork?.map((item: any) => ({ name: item.Id, value: item.Value }))
          }
          getEchartsTwo(state.pic2)
          break
        case 2:
          state.data = {
            title: '群发趋势图',
            color: ['#ebc260', '#438ded'],
            legend: ['客户数', '消息数量'],
            time: res.TrendChat.Cust.Time,
            data1: res.TrendChat.Cust.Data,
            data2: res.TrendChat.Message.Data
          }
          getEchartsLine(state.data)
          state.pic1 = {
            title: '群发客户情况',
            color: ['#e69840', '#f1c993', '#e9a857'],
            legend: ['已发送', '等待发送', '发送失败'],
            data: res.CustChat?.map((item: any) => ({ name: item.Id, value: item.Value }))
          }
          getEchartsOne(state.pic1)
          state.pic2 = {
            title: '群发消息情况',
            color: ['#3e76ea', '#8fb6f4', '#6d9af1'],
            legend: ['已发送', '等待发送', '发送失败'],
            data: res.MessageChat?.map((item: any) => ({ name: item.Id, value: item.Value }))
          }
          getEchartsTwo(state.pic2)

          break
        case 4:
          state.data = {
            title: '监控事件趋势图',
            massDataList: res.dataList.massDataList,
            massDispatchList: res.dataList.massDispatchList,
            messFailList: res.dataList.messFailList,
            privateLetterList: res.dataList.privateLetterList,
            messNoSendList: res.dataList.messNoSendList
          }
          
          getOverViewEChart(state.data)
          break;
      }
    }
    useExpose({
      onState
    })
    return () => (
      <div class={styles.line_chart}>
        <div ref={myChartLineRef} class={styles.echarts}></div>
        <div class={styles.pic_box} v-show={state.isPicShow}>
          <div ref={myChartWeixinPieRef} class={styles.echarts}></div>
          <div v-show={state.picShow} ref={myChartQyWeixinPieRef} class={styles.echarts}></div>
        </div>
      </div>
    )
  }
})
